<template>
  <div>
    <div class="dingdan">
      <div class="top">
            <span :class="{upDown:k==index}" @click="clickUpDown(k,v)" v-for="(v,k) in upDownArr" :key="k"
                  style="margin: 10px">{{ v }}</span>
      </div>
    </div>

    <div class="input">
      <div>
        <span>用户手机号：</span>
        <el-input class="shuru" v-model="mendainphone" placeholder="请输入内容">{{ mendainphone }}</el-input>
      </div>
      <div>
        <span>下单人姓名：</span>
        <el-input class="shuru" v-model="inputname" placeholder="请输入内容">{{ inputname }}</el-input>
      </div>

      <div>
        <span>状态：</span>
        <el-select v-model="select" placeholder="全部">
          <el-option label="全部" value="0"></el-option>
          <el-option label="已取消" value="-1"></el-option>
          <el-option label="待接单" value="1"></el-option>
          <el-option label="已接单配送中" value="2"></el-option>
          <el-option label="已完成" value="3"></el-option>
        </el-select>
      </div>

      <div>
        <span>所属门店：</span>
        <el-input class="shuru" v-model="inputmendain" placeholder="请输入内容" disabled>{{ inputmendain }}</el-input>
      </div>
      <div class="block">
        <span class="demonstration">下单日期：</span>
        <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">

        </el-date-picker>
        <el-button style="margin-left: 10px" type="primary" @click="searchTableList">搜索</el-button>
      </div>

    </div>


    <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: '#1890FF',
          color: '#FFFFFF',
          textAlign: 'center',
        }"
        :cell-style="{ textAlign: 'center', fontSize: '13px' }"
        v-if="index==2"

    >
      <el-table-column prop="orderNumber" label="订单Id">
      </el-table-column>
      <el-table-column prop="deliveryUserPhone" label="用户手机号">
      </el-table-column>
      <el-table-column prop="deliveryUserName" label="昵称">
      </el-table-column>
      <el-table-column prop="deliveryAddressDetail" label="地址">
      </el-table-column>
      <el-table-column prop="goodsPresentPrice" label="发件信息">
      </el-table-column>
      <el-table-column prop="goodsPresentPrice" label="收件信息">
      </el-table-column>
      <el-table-column prop="orderNote" label="备注信息">
      </el-table-column>
      <el-table-column prop="deliveryOrderCreateTime" label="下单时间"></el-table-column>
      <el-table-column prop="deliveryOrderStatus" label="状态">
        <template slot-scope="scope">
          {{statusMap[scope.row.deliveryOrderStatus]}}
        </template>
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <a href=""></a>
      </el-table-column>
    </el-table>

    <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: '#1890FF',
          color: '#FFFFFF',
          textAlign: 'center',
        }"
        :cell-style="{ textAlign: 'center', fontSize: '13px' }"
        v-if="index==1"
    >
      <el-table-column prop="orderNumber" label="订单Id">
      </el-table-column>
      <el-table-column prop="deliveryUserPhone" label="用户手机号">
      </el-table-column>
      <el-table-column prop="deliveryUserName" label="昵称">
      </el-table-column>
      <el-table-column prop="deliveryAddressDetail" label="收件地址">
      </el-table-column>
      <el-table-column prop="goodsPresentPrice" label="取件码图片">
      </el-table-column>
      <el-table-column prop="orderNote" label="备注信息">
      </el-table-column>
      <el-table-column prop="pickupAddress" label="取货点">
      </el-table-column>
      <el-table-column prop="pickupAddressDetail" label="取货地址">
      </el-table-column>
      <el-table-column prop="deliveryOrderCreateTime" label="下单时间"></el-table-column>
      <el-table-column prop="deliveryOrderStatus" label="状态">
        <template slot-scope="scope">
          {{statusMap[scope.row.deliveryOrderStatus]}}
        </template>
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <a href=""></a>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "dingdan",
  data() {
    return {
      upDownArr: ["帮我买", "帮我取", "帮我送"],
      deliveryOrderType:3,
      index: 0,
      inputmendain: "",
      inputname: "",
      mendainphone: '',
      select: "",
      value1: [],
      orderCreateTime: "",
      orderDeliveryTime: "",
      tableData: [], // 表格数据
      currentPage: 1, // 当前页数
      pageSize: 5, // 每页条数
      total: 0,// 数据总数
      searchResults: [], // 存储搜索结果
      statusMap:{
        "-1":"已取消",
        "1":"待接单",
        "2":"已接单配送中",
        "3":"已完成"
      }

    }
  },

  methods: {
    clickUpDown(k,v) {
      this.index = k;
      if (v=="帮我买"){
        this.deliveryOrderType=3
      }
      if (v=="帮我送"){
        this.deliveryOrderType=1
      }
      if (v=="帮我取"){
        this.deliveryOrderType=2
      }
      console.log(this.deliveryOrderType,"这是deliveryOrderType")
      this.getTableData()
    },
    searchTableList() {
      this.getTableData()
    },
    // 切换每页条数
    handleSizeChange(size) {
      this.pageSize = size;
      // 可以在这里重新获取数据
      this.getTableData();
    },
    // 切换当前页
    handleCurrentChange(page) {
      this.currentPage = page;
      // 可以在这里重新获取数据
      this.getTableData()

    },
    //获取表格数据
    getTableData() {
      if (this.value1.length < 1) {
        this.value1[0] = "";
        this.value1[1] = "";
      }
      this.orderCreateTime = this.getDateString(this.value1[0])
      this.orderDeliveryTime = this.getDateString(this.value1[1])

      this.axios.get("/delivery/order", {
        params: {
          deliveryOrderType:this.deliveryOrderType,
          deliveryUserPhone: this.mendainphone,
          deliveryUserName: this.inputname,
          orderStatus: this.select,
          orderCreateTime: this.orderCreateTime,
          orderDeliveryTime: this.orderDeliveryTime,
          page: this.currentPage,
          size: this.pageSize,
        }
      }).then(res => {
        console.log("这是res",res)
        console.log(res.data.data)
        this.tableData = res.data.data.list
        this.total=res.data.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    getDateString(date) {
      // let str = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " 00:00:00";
      // return str;
      if (!date) {
        return ""
      }
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },


  },
  watch: {
    value1(newValue, oldValue) {
      console.log(oldValue)
      console.log(newValue)
      console.log(typeof this.getDateString(newValue[0]))
      console.log(this.getDateString(newValue[0]))
      console.log(this.getDateString(newValue[1]))

    }

  },
  created() {
    this.getTableData()
  }
}
</script>

<style scoped>
.dingdan {
  /*height: 800px;*/
  /*background-color: yellowgreen;*/
  padding: 20px;
}

.upDown {
  color: rgb(41, 255, 255);
}

.upload-demo {
  display: inline-block;
  margin-bottom: 20px;
}


.input {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.input > div {
  margin: 20px 0;
}

span {
  font-size: 16px;
}

.shuru {
  width: 200px;
  height: 36px;
  padding: 0 15px;

}
</style>